<template>
	<view class="wrap">
		<view class="filter-box">
			<view class="filter-item" v-for="filter in filterList" :key="filter.ident" @click="filter(filter.ident)">
				<view v-if="filter.ident == currentFilterIdent" class="active">
					<text>{{ filter.name }}</text>
				</view>
				<view v-else class="">
					<text>{{ filter.name }}</text>
				</view>	
			</view>	
		</view>
			
		<view class="order-item" v-for="order in orderList" :key="order.id">
			<view class="order-item-info" @click="gotoOrderDetail(order.id)">
				<view class="order-head">
					<text class="code">订单号: {{ order.orderNumber }}</text>
					<text v-if="order.state == 1" class="state">待支付</text>
					<text v-if="order.state == 2" class="state">待发货</text>
					<text v-if="order.state == 3" class="state">待收货</text>
					<text v-if="order.state == 4" class="state">已完成</text>
					<text v-if="order.state == 8" class="state" style="color:#acacac;">已取消</text>
				</view>	
				<view class="product-item" v-for="product in order.productList" :key="product.id">
					<view class="product">
						<view class="photo">
							<u--image :src="product.cover" width="136rpx" height="136rpx"></u--image>
						</view>	
						<view class="info">
							<text class="title">{{ product.title }}</text>
							<text class="specs">{{ product.specs }}</text>
						</view>
					</view>
					<view class="cost">
						<text class="price">￥{{ product.price }}</text>
						<text class="num">x {{ product.num }}</text>
					</view>
				</view>
				<view class="settle">
					<view class="total-num">共2件</view>
					<view class="cost-price">实付:￥23.9</view>
				</view>
			</view>
			<view class="handle">
				<view class="more">
					
				</view>
				<view class="btns">
					<button primary="default" class="btn" v-if="order.state == 1">取消订单</button>
					<button primary="default" class="btn" v-if="order.state == 3">延长收货</button>
					<button primary="default" class="btn" v-if="order.state == 3">查看物流</button>
					<button v-if="order.state == 1" primary="default" class="btn primary">支付</button>
					<button v-if="order.state == 3" primary="default" class="btn primary">确认收货</button>
					<button v-if="order.state == 4" primary="default" class="btn primary">评价</button>
				</view>	
			</view>	
		</view>	
	</view>	
</template>

<script>
import { orderList } from '@/api/uc/order.js';	

export default {
	onLoad(options) {
		if(options.filter != undefined) {
			this.filter = options.filter;
		}
		this.init();
	},
	data() {
		return {
			currentFilterIdent: 'ALL',
			filterList: [{
				ident: 'ALL',
				name: "全部"	
			},{
				ident: 'WAIT_PAY',
				name: "待付款"	
			},{
				ident: 'WAIT_RECEIVE',
				name: "待收货"	
			},{
				ident: 'WAIT_COMMENT',
				name: "待评价"	
			},{
				ident: 'POST_SALE',
				name: "退款/售后"	
			}],
			orderList: []
		}
	},
	methods: {
		init() {
			uni.showLoading({title: '加载中'});
			orderList(this.currentFilterIdent).then(res=>{
				uni.hideLoading();
				this.orderList = res.data.orderList;
			});
		},
		filter(ident) {
			this.currentFilterIdent = ident;
			this.init();
		},
		gotoOrderDetail(id) {
			uni.navigateTo({
				url: '/pages/uc/order?id=' + id
			})
		}
	}
}	
</script>

<style lang="less" scoped>
.wrap {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background: #f4f4f4;
}
	
.filter-box {
	display: flex;
	flex-direction: row;
	margin: 12rpx 24rpx;
	
	.filter-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 20%;
		font-size: 12px;
		color: #8c8c8c;
		
		.active {
			padding: 12rpx 0;
			color: #b3212c;
			border-bottom: 1px solid #b3212c;
			text-align: center;
		}
		
		.normal {
			padding: 12rpx 0;
			border-bottom: 1px solid #f4f4f4;
			text-align: center;
		}
	}
}	

.order-item {
	display: flex;
	flex-direction: column;
	margin: 12rpx 24rpx;
	padding: 24rpx;
	border-radius: 5px;
	background: #fff;
	
	.order-item-info {
		.order-head {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-bottom: 12rpx;
			
			.code {
				font-size: 12px;
				color: #8c8c8c;
			}
			
			.state {
				font-weight: bold;
				font-size: 13px;
				color: #b3212c;
			}
		}
	
		.product-item {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin: 12rpx 0;
			
			.product {
				display: flex;
				flex-direction: row;
				
				.info {
					display: flex;
					flex-direction: column;
					margin: 0 12rpx;
					
					.title {
						font-size: 13px;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					
					.specs {
						margin-top: 5px;
						font-size: 12px;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						text-overflow: ellipsis;
						color: #8c8c8c;
					}
				}
				
				
			}
			
			.cost {
				display: flex;
				flex-direction: column;
				text-align: right;
				
				.price {
					font-size: 12px;
				}
				
				.num {
					margin-top: 3px;
					font-size: 10px;
					color: #acacac;
				}
			}
		}	
	
		.settle {
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			align-items: center;
			margin: 24rpx 0; 
			
			.total-num {
				margin-right: 10px;
				font-size: 12px;
				color: #acacac;
			}
			
			.cost-price {
				font-size: 14px;
			}
		}
	}	
	
	.handle {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		
		.btns {
			display: flex;
			flex-direction: row;
			
			.btn {
				width: 80px;
				height: 25px;
				line-height: 25px;
				font-size: 12px;
				margin-left: 10px;
				color: #555;
			}
			
			.primary {
				background: #b3212c;
				color: #fff;
			}
		}
	}
}	
</style>